import React, { FC, useEffect, useRef } from "react";
import * as echarts from "echarts";
import { EChartsOption, EChartsResponsiveOption } from "echarts";
import type { RadarChartsProps } from "@/types/echartInterface";

const RadarChart: FC<RadarChartsProps> = (props:RadarChartsProps) => {
  const chartRef = useRef<HTMLDivElement | null>(null);
  const { radarList, radarChartStyle, indicatorList } = props;
  useEffect(() => {
    // Initialize the chart
    const chartInstance = echarts.init(chartRef.current!);

    const arr: string[] = [];
    // Set chart options
    const options: EChartsOption = {
      tooltip: {
        show: true,
        trigger: "item",
      },
      backgroundColor: "#fff",
      title: {
        text: "设备地市分布",
        left: "center",
        top: 5, // 增加这个属性来调整标题距离图表的垂直距离
        textStyle: {
          color: "#333333",
        },
      },
      radar: {

        center: ["50%", "50%"],
        radius: "60%",
        startAngle: 90,
        splitNumber: 4,
        splitArea: {
          areaStyle: {
            color: ["transparent"],
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#d1d1d1",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#099B93",
          },
        },
        axisLabel: {
          show: true,
          color: "#ccc",

          formatter: function (name: string) {
            // 显示四个刻度值
            if (!arr.includes(name)) {
              arr.push(name);
              return name;
            }
            return "";
          },
        },
        indicator: indicatorList,
      },
      series: [
        {
          name: "设备台数",
          type: "radar",
          symbol: "circle",
          //连接处小圆圈大小
          symbolSize: 3,
          areaStyle: {
            //@ts-ignore
            color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
              { offset: 1, color: "#099B93" },
              { offset: 0.46, color: "rgba(192,255,0,0.74)" },
              { offset: 0, color: "#FFD904" },
            ]),
          },
          itemStyle: {

            color: "#6CC3BF",
            borderColor: "#099B93",
            borderWidth: 3,
          },
          //线的颜色
          lineStyle: {
            color: "#6CC3BF",
            width: 2,
          },
          label: {
            show: true,
            color: "#000",
          },
          data: radarList,
        },
      ],
    };

    // Use the specified options
    chartInstance.setOption(options as EChartsResponsiveOption);

    // Cleanup chart instance on component unmount
    return () => {
      chartInstance.dispose();
    };
  }, [radarList]);

  return <div ref={chartRef} style={radarChartStyle} />;
};

export default RadarChart;
